<template>
	<view class="page order_detail_page">
		<view class="card detail">
			<view class="card_title">订单信息</view>
			<view class="order_type">
				<view class="order_item_status" :class="{
						gray:detail.status == 5 || detail.status== 6,
						yellow:detail.status == 1 || detail.status==4 ,
						blue:detail.status == 2 || detail.status == 3
					}">
					{{detail.statusName || '-'}}
				</view>
			</view>
			<view class="card_contet">
				<view class="item_text">
					<view class="title">
						问诊方式:
					</view>
					<view class="text">
						{{detail.orderTypeName || '-'}}
					</view>
					<view class="text doctor_type blue">
						{{detail.consultationSourceName|| '-'}}
					</view>
				</view>
				<view class="item_text">
					<view class="title">
						订单金额:
					</view>
					<view class="text">
						￥{{detail.price || 0}}
					</view>
				</view>
				<view class="item_text flex-start">
					<view class="title">
						问诊医生:
					</view>
					<view class="content">
						<doctorInfo :item="{
							name:detail.doctorName,
							titleName:detail.titleName,
							departName:detail.departName,
							levelName:detail.levelName,
							hospitalName:detail.hospitalName
						}"></doctorInfo>
					</view>
				</view>
				<view class="item_text">
					<view class="title">
						订单编号:
					</view>
					<view class="text">
						{{detail.orderId}}
					</view>
				</view>
				<view class="item_text">
					<view class="title">
						提交时间:
					</view>
					<view class="text">
						{{$dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss')}}
					</view>
				</view>
			</view>
		</view>
		<view class="card patient">
			<view class="patient_info">
				<view class="item_avatar">
					<image
						:src="detail.patientInfoBaseVO.avatar || 'https://admin.yuanfenjihua.com/admin-api/infra/file/0/get/7d485f174dd88232f08d5d0ea6d05b153a3857402e3ce776d2c1eca015cad0cb.png'"
						mode="scaleToFill"></image>
				</view>
				<view class="item_info">
					<view class="info_name">
						<view class="name">
							{{detail.patientInfoBaseVO.name}}
						</view>
						<view class="tips blue">
							已实名
						</view>
					</view>
					<view class="info_other">
						<view>
							{{detail.patientInfoBaseVO.sex == 1?'男':'女'}}
						</view>
						<view>
							{{detail.patientInfoBaseVO.age}}岁
						</view>
						<view>
							{{detail.patientInfoBaseVO.idCard || ''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card disease" v-if="detail.consultationFormRespVO">
			<view class="card_title">
				病情描述
			</view>
			<view class="card_contet">
				<view class="item_info">
					<view class="item_title">
						身高/体重
					</view>
					<view class="item_text">
						{{`${detail.consultationFormRespVO.height || 0}CM/${detail.consultationFormRespVO.weight || 0}KG`}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						您觉得现在最主要的不适是什么，请详细描述下?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.diseaseDescribe || '无'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						您发病的时候，伴随那些其他的不适?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.otherDiscomforts|| '无'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						本次生病是否去医院就诊过？哪家机构
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.hospitalIf==0?'否':detail.consultationFormRespVO.hospitalName?detail.consultationFormRespVO.hospitalName:'是'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						做了哪些检查和治疗，结果和效果如何?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.results|| '无'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						当前是否有正在使用的药物?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.medicationIf==1?'是':'否'}}
					</view>
				</view>
				<view class="item_info">
					<view class="item_title">
						是否有过手术或放化疗等重大疾病治疗经历及慢性病史?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.radiotherapyIf==1?'是':'否'}}
					</view>
				</view>
				<!-- 		<view class="item_info">
					<view class="item_title">
						请上传能反应患者病情的相关资料?
					</view>
					<view class="item_text">
						180CM/60KG
					</view>
				</view> -->
				<view class="item_info">
					<view class="item_title">
						想获得什么帮助?
					</view>
					<view class="item_text">
						{{detail.consultationFormRespVO.consultationDescribe || '无'}}
					</view>
				</view>
			</view>
		</view>
		<view class="card order">
			<view class="card_title">
				订单详情
			</view>
			<view class="item_info">
				<view class="item_title">
					付款金额：
				</view>
				<view class="item_text price">
					￥{{detail.price}}
				</view>
			</view>
			<view class="item_info">
				<view class="item_title">
					{{detail.orderTypeName}}：
				</view>
				<view class="item_text price">
					￥{{detail.consultationPlatform}}/2天
				</view>
			</view>
			<view class="item_info">
				<view class="item_title">
					平台服务费：
				</view>
				<view class="item_text ">
					￥{{detail.platform}}
				</view>
			</view>
			<view class="item_info" v-if="detail.payTime">
				<view class="item_title">
					付款时间：
				</view>
				<view class="item_text">
					{{$dayjs(detail.payTime).format('YYYY-MM-DD HH:mm:ss')}}
				</view>
			</view>
		</view>
		<template v-if="detail.status == 3 || detail.status == 5 || detail.status == 6">
			<view>
				<view class="gap-120"></view>
				<view class="flex">
					<view class="btns gray" v-if="detail.status == 1">
						取消订单
					</view>
					<view class="btns" v-if="detail.status == 1">
						去支付
					</view>
					<view class="btns" v-if="detail.status == 2">
						去沟通
					</view>
					<view class="btns" v-if="detail.status == 4">
						立即评价
					</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import {
		getOrderInfoDetail
	} from '@/api/index.js'
	export default {
		name: 'orderDetails',
		data() {
			return {
				id: 0,
				detail: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getOrderInfoDetail()
		},
		methods: {
			getOrderInfoDetail() {
				getOrderInfoDetail({
					id: this.id
				}).then(res => {
					this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_detail_page {
		.gap-120 {
			padding: 60rpx 0;
		}

		.card {
			margin-bottom: 30rpx;
		}

		.detail {
			position: relative;

			.order_type {
				position: absolute;
				right: 0;
				top: 0;
				border-top-right-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				overflow: hidden;

				.order_item_status {
					text-align: right;
					font-size: 26rpx;
					padding: 20rpx 30rpx 20rpx 50rpx;

					&.yellow {
						position: relative;
						color: #F1AE34;
						background-color: #FDF7EC;

						&::after {
							content: '';
							position: absolute;
							width: 10rpx;
							height: 10rpx;
							top: 50%;
							left: 30rpx;
							transform: translate(-50%, -50%);
							background-color: #F1AE34;
							border-radius: 100%;
							box-shadow: 0 0 10rpx 8rpx #FBECD1;
						}
					}

					&.blue {
						position: relative;
						color: #3f6ffe;
						background-color: #D2DDFD;

						&::after {
							content: '';
							position: absolute;
							width: 10rpx;
							height: 10rpx;
							top: 50%;
							left: 30rpx;
							transform: translate(-50%, -50%);
							background-color: #3f6ffe;
							border-radius: 100%;
						}
					}

					&.gray {
						position: relative;
						color: #999;
						background-color: #f8f8f8;

						&::after {
							content: '';
							position: absolute;
							width: 10rpx;
							height: 10rpx;
							top: 50%;
							left: 30rpx;
							transform: translate(-50%, -50%);
							background-color: #999;
							border-radius: 100%;
						}
					}
				}
			}

			.item_text {
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;


				&.flex-start {
					align-items: flex-start;
				}

				.title {
					flex: 0 0 120rpx;
					color: #999999;
				}

				.text {
					margin-left: 20rpx;

					.tips {
						display: inline-block;
						padding: 6rpx 15rpx;
						margin-left: 15rpx;
						color: #3E6EFE;
						border: 1px solid #3E6EFE;
						border-radius: 10rpx;
						font-size: 22rpx;
					}

					.location {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-radius: 100rpx;
					}

					&.doctor_type {
						background-color: #F8FAFB;
						font-size: 22rpx;
						border-radius: 10rpx;
						padding: 6rpx 8rpx;
						text-align: center;

						&.blue {
							color: #3C6DFE;
							background-color: #D2DDFD;
						}

						&.yellow {
							color: #F1AE34;
							background-color: #FBECD1;
						}
					}
				}

				.content {
					margin-left: 20rpx;
					background: #F8FAFB;
					border-radius: 10rpx;
					padding: 20rpx 10rpx;
				}
			}
		}

		.patient {
			position: relative;
			padding: 40rpx 20px;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.patient_info {
				display: flex;
				align-items: center;

				.item_avatar {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item_info {
					margin-left: 20rpx;
					font-size: 22rpx;
					color: #999999;

					.info_name,
					.info_other {
						display: flex;
						align-items: center;

						&>view {
							margin-right: 10rpx;

							&:last-child {
								margin: 0;
							}
						}
					}

					.info_name {
						margin-bottom: 20rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.tips {
							padding: 6rpx 10rpx;
							border-radius: 10rpx;
							font-size: 22rpx;
							margin-left: 20rpx;

							&.blue {
								color: #3B6CFE;
								background-color: #F3F8FF;
							}

							&.gray {
								color: #999;
								background-color: #f5f5f5;
							}
						}
					}
				}
			}
		}

		.disease {
			.card_contet {
				padding: 20rpx;

				background-color: #FAFAFA;
				border-radius: 20rpx;


				.item_info {
					padding: 0 20rpx;
					margin-bottom: 20rpx;

					.item_title {
						position: relative;
						color: #999;
						font-size: 26rpx;
						margin-bottom: 20rpx;

						&::before {
							content: "";
							position: absolute;
							left: -20rpx;
							top: 50%;
							width: 10rpx;
							height: 10rpx;
							background-color: #999;
							border-radius: 100%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.item_text {
					font-size: 26rpx;
					color: #333;
				}
			}
		}

		.note {
			color: #D81E06;
			font-size: 28rpx;

			.note_title {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 30rpx;
					height: 30rpx;
				}

				.text {
					margin-left: 10rpx;
				}
			}
		}

		.order {
			.item_info {
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.item_title {
					color: #999;
					font-size: 26rpx;
					margin-right: 20rpx;
				}

				.item_text {
					font-size: 26rpx;
					color: #333;

					&.price {
						font-weight: bold;
						font-size: 32rpx;
						color: #FB5544;
					}

				}
			}
		}

		.flex {
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			padding: 30rpx 0;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btns {
				flex: 1;
				box-sizing: border-box;
				padding: 20rpx 0;
				border-radius: 20rpx;

				&.gray {
					background-color: #EBEBEB;
					color: #999;
				}
			}
		}
	}
</style>